<template>
  <div class="container">
      <el-row type="flex" justify="space-between">
        <!-- 菜单栏 -->
        <div class="menus-warapper">
          <!-- 菜单内容 -->
          <div>
            <AsideMenu @bbbb="menusRouteCity"/>
          </div>
          <!-- 侧栏推荐 -->
          <div class="aside-recommend">
            <h4 class="aside-title">推荐城市</h4>
            <a href="/post#" class="aside-recommend-item">
              <img src="http://157.122.54.189:9093/images/pic_sea.jpeg" alt="">
            </a>
          </div>
        </div>
        <!-- 文章栏 -->
        <div class="post-wrapper">
          <!-- 搜索模块 -->
          <div class="search-wrapper">
            <!-- 搜索框 -->
            <div class="search-bar">
              <input type="text" placeholder="请输入想去的地方,比如 : '广州'" 
              v-model="searchText"
              >
              <i class="el-icon-search" 
                @click="$router.push(`post?city=${searchText}&start=${$route.query.start}&limit=${$route.query.limit}`)"
              ></i>
            </div>
            <!-- 搜索建议 -->
            <div class="search-recommend">
              推荐 : 
              <a href="javascript:void(0)" @click="changeRouteCity($event)">广州</a>
              <a href="javascript:void(0)" @click="changeRouteCity($event)">上海</a>
              <a href="javascript:void(0)" @click="changeRouteCity($event)">北京</a>
            </div>
          </div>
          <!-- 标题与写游记按钮 -->
          <div class="post-title">           
            <h4>推荐攻略</h4>
            <!-- 写游记按钮 -->
            <button @click="$router.push('/post/create')">
              <i class="el-icon-edit"></i>
              <span>写游记</span>
            </button>
          </div>
          <!-- 文章列表 -->
          <PostItem />
        </div>
      </el-row>
  </div>
</template>

<script>
import PostItem from '@/components/post/PostItem'
import AsideMenu from '@/components/post/AsideMenu'
export default {
  components:{
    PostItem,
    AsideMenu
  },
  data(){
    return{
      searchText:''
    }
  },
  methods:{
    menusRouteCity(city){
      this.searchText = city
    },
    changeRouteCity(event){
    //  console.log(event.target.text);
     this.$router.push(`post?city=${event.target.text}&start=${this.$route.query.start}&limit=${this.$route.query.limit}`)
     this.searchText = event.target.text
   }
  }
}
</script>

<style lang="less" scoped>
.container{
  width: 1000px;
  margin: 0 auto;
  padding: 20px 0;
}
.menus-warapper{
  position: relative;
  width: 260px;
  height: 1000px;
  // background-color: #bbb;

  
  .aside-recommend{
    margin-top: 20px;
    .aside-title{
      font-weight: 400;
      padding-bottom: 10px;
      border-bottom: 1px solid #ddd;
    }
    .aside-recommend-item>img{
      width: 100%;
      display: block;
    }
  }
}
.post-wrapper{
  width: 700px;
  .search-bar{
    display: flex;
    width: 100%;
    height: 40px;
    line-height: 40px;
    box-sizing: border-box;
    border: 3px solid orange;
    input{
      flex: 1;
      border: none;
      outline: none;
      padding: 0 20px;
    }
    i{
      font-size: 24px;
      color: orange;
      font-weight: 700;
      line-height: 36px;
      margin-right: 10px;
    }
    
  }
  .search-recommend{
    padding: 10px 0;
    font-size: 12px;
    color: #666;
    a{
      margin:0 6px;

      &:hover{
        text-decoration:underline;
        color: orange;
      }
    }
  }
  .post-title{
    display: flex;
    height: 50px;
    line-height: 50px;
    // padding-bottom: 1px; 
    border-bottom: 1px solid #eee;

    h4{
      
      width: 72px;
      font-weight: 400;
      font-size: 18px;
      border-bottom: 2px solid orange;
      color: orange;
    }
    button{
      width: 108px;
      height: 40px;
      outline: none;
      box-sizing: border-box;
      margin-left: auto;
      background-color: #409eff;
      border: none;
      border-radius: 5px;
      color: #fff;

      &:hover{
        background-color: #66b1ff;
      }
    }
  }
}
</style>